<!-- 跟单-发起策略列表-->
<template>
  <div>
    <div class="bg bg2"  v-if="isShow" @click="click(item)">

      <div class="info">

        <div class="info-rate">
          <text :class="['font40', Config.upDownFont(item.averageYearIncome)]">{{math.addJia(item.averageYearIncome)+'%'}}</text>
          <div class="height8"></div>
          <text class="font24 text3">{{T('平均年化')}}</text>
        </div>

        <div class="all">

          <div class="row acenter">
            <text class="font32 text1">{{item.projectName}}</text>
            <div class="width10"></div>
            <div class="tag bg3">
              <text class="font20 text1">{{item.projectNum}}</text>
            </div>
          </div>
          

          <div class="info-tags">
            <div v-for="(map, index) in item.advanceSetting.exchangeLimit" v-bind:key="index">
              <div class="tag bg3" v-if="index < 3">
                <text class="font20 text1" >{{map.exchangeName}}</text>
              </div>
            </div>
          </div>

          <text class="info-explain font24 text3">{{T(item.projectIntroduct)}}</text>
        </div>
      </div>

      <div class="line bg3"></div>
      <div class="money">
        <text class="font22 text3 all">{{T('累计投入') + '/' + T('收益') + ' ' + item.totalInvest + '/' + item.totalIncome + ' ' + item.advanceSetting.symbol}}</text>
        <text class="font22 text3">{{item.teamName}}</text>
      </div>


      <div :class="['type', item.spotOrContract ? 'type-hong' : '']">
        <text :class="['font22', item.spotOrContract ? 'udRed-t1' : 'main-t1']">{{item.spotOrContract ? T('币币&合约') : T('币币')}}</text>
      </div>
    </div>
  </div>
</template>

<script>

import Config from "@/_js/config";
import math from "@/_js/math";

import I18N from "@/_i18n/i18n";
var T = I18N.t;
export default {

  props:{
    item: Object,
  },
  

  data() {
    return {
      T:T,
      Config:Config,
      math:math,
      isShow:false
    };
  },

  mounted() {
    Config.init(()=>{
      this.isShow = true;
    },[Config.OPT_UP_DOWN]);
  },
  
  methods: {


    /********************************** 点击触发*/
    click() {
      this.$emit("click");
    },
  },
};
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  border-radius: 8px;

  padding-left: 40px;
  padding-right: 40px;
}
.line {
  height: 1px;
}
.tag {
  flex-direction: row;
  align-items: center;
  height: 32px;

  border-radius: 6px;

  padding-left: 10px;
  padding-right: 10px;

  margin-right: 20px;
}

/*********************** 信息*/
.info {
  flex-direction: row;
  align-items: center;

  padding-top: 24px;
  padding-bottom: 20px;
}
.info-rate {
  width: 220px;
  margin-right: 20px;
}
.info-tags {
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.info-explain {
  lines:1;
  text-overflow: ellipsis;
}

/*********************** 投入/收益*/
.money {
  height: 80px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/*********************** 类型*/
.type{
  position: absolute;
  flex-direction: row;
  align-items: center;
  height: 32px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;

  background-color: rgba(22, 119, 254, 0.1);

  top: 0;
  right: 0;
}
.type-hong{
  background-color: rgba(252, 97, 128, 0.1);
}
/*********************** 间距*/
.height8 {
  height: 8px;
}
.width10{
  width: 10px;
}
</style>